// ============================================================================
// 按钮组件
// ============================================================================

import React, { forwardRef } from 'react'
import { ButtonSpinner } from './loading-spinner'

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'ghost' | 'outline'
  size?: 'sm' | 'md' | 'lg'
  loading?: boolean
  icon?: React.ReactNode
  iconPosition?: 'left' | 'right'
}

/**
 * 按钮组件
 */
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
  variant = 'primary',
  size = 'md',
  loading = false,
  icon,
  iconPosition = 'left',
  children,
  className = '',
  disabled,
  ...props
}, ref) => {
  const baseClasses = 'btn'
  const variantClasses = {
    primary: 'btn-primary',
    secondary: 'btn-secondary',
    danger: 'btn-danger',
    success: 'btn-success',
    ghost: 'btn-ghost',
    outline: 'btn-outline'
  }
  const sizeClasses = {
    sm: 'btn-sm',
    md: '',
    lg: 'btn-lg'
  }

  const classes = [
    baseClasses,
    variantClasses[variant],
    sizeClasses[size],
    className
  ].filter(Boolean).join(' ')

  const isDisabled = disabled || loading

  return (
    <button
      ref={ref}
      className={classes}
      disabled={isDisabled}
      {...props}
    >
      {loading && <ButtonSpinner className="mr-2" />}
      {!loading && icon && iconPosition === 'left' && (
        <span className="mr-2">{icon}</span>
      )}
      {children}
      {!loading && icon && iconPosition === 'right' && (
        <span className="ml-2">{icon}</span>
      )}
    </button>
  )
})

Button.displayName = 'Button'

/**
 * 图标按钮组件
 */
export const IconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, 'children'> & {
  icon: React.ReactNode
  'aria-label': string
}>(({ icon, size = 'md', className = '', ...props }, ref) => {
  const sizeClasses = {
    sm: 'p-1.5',
    md: 'p-2',
    lg: 'p-3'
  }

  return (
    <Button
      ref={ref}
      size={size}
      className={`${sizeClasses[size]} ${className}`}
      {...props}
    >
      {icon}
    </Button>
  )
})

IconButton.displayName = 'IconButton'

/**
 * 按钮组组件
 */
export interface ButtonGroupProps {
  children: React.ReactNode
  className?: string
  orientation?: 'horizontal' | 'vertical'
}

export function ButtonGroup({ 
  children, 
  className = '', 
  orientation = 'horizontal' 
}: ButtonGroupProps) {
  const orientationClasses = {
    horizontal: 'flex-row',
    vertical: 'flex-col'
  }

  return (
    <div className={`inline-flex ${orientationClasses[orientation]} ${className}`}>
      {React.Children.map(children, (child, index) => {
        if (React.isValidElement(child)) {
          const isFirst = index === 0
          const isLast = index === React.Children.count(children) - 1
          
          let additionalClasses = ''
          
          if (orientation === 'horizontal') {
            if (!isFirst && !isLast) {
              additionalClasses = 'rounded-none border-l-0'
            } else if (isFirst) {
              additionalClasses = 'rounded-r-none'
            } else if (isLast) {
              additionalClasses = 'rounded-l-none border-l-0'
            }
          } else {
            if (!isFirst && !isLast) {
              additionalClasses = 'rounded-none border-t-0'
            } else if (isFirst) {
              additionalClasses = 'rounded-b-none'
            } else if (isLast) {
              additionalClasses = 'rounded-t-none border-t-0'
            }
          }

          return React.cloneElement(child, {
            className: `${child.props.className || ''} ${additionalClasses}`.trim()
          })
        }
        return child
      })}
    </div>
  )
}
